<template>
	<view class="feedback-form">
		<!-- 头部 -->
		<view class="header">

			<u-icon name="arrow-left" size="32" color="#666"></u-icon>
			<text class="title">填写投诉建议</text>
		</view>

		<!-- 位置信息 -->
		<view class="location">
			<u-icon name="map-fill" size="32" color="#666"></u-icon>
			<text>金岱智慧产业园一期</text>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 联系人 -->
			<view class="form-item">
				<view class="label">
					联系人
					<text class="required">*</text>
				</view>
				<u-input v-model="formData.contact" placeholder="请填写你的姓名" :border="false" clearable />
			</view>

			<!-- 手机号 -->
			<view class="form-item">
				<view class="label">
					手机
					<text class="required">*</text>
				</view>
				<u-input v-model="formData.phone" placeholder="请输入你的手机号" :border="false" clearable type="number"
					maxlength="11">
				</u-input>
			</view>

			<!-- 详情 -->
			<view class="form-item" style="display: block;">
				<view class="label">
					详情
					<text class="required">*</text>
				</view>
				<u-textarea v-model="formData.details" placeholder="请详细描述您的建议、意见、问题等" :maxlength="500" />
			</view>

			<!-- 媒体上传 -->
			<view class="upload-section">
				<text class="upload-title">添加视频/图片</text>
				<view class="upload-container">
					<!-- 视频上传 -->
					<!-- 		<view class="upload-item" @tap="uploadVideo">
						<view class="upload-box">
							<text>上传视频</text>
							<text class="upload-hint">(最多1个)</text>
						</view>
						<view class="preview-video" v-if="formData.video">
							<video :src="formData.video" class="video-preview"></video>
							<u-icon name="close" @tap.stop="removeVideo" class="remove-btn"></u-icon>
						</view>
					</view> -->
					<up-upload accept='image' :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
						multiple :maxCount="10"></up-upload>
					<!-- 图片上传 -->
					<up-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
						:maxCount="10" accept="video"></up-upload>
					<!-- <view class="upload-item">
						<view class="upload-box" @tap="uploadImages">
							<u-icon name="camera-fill" size="48" color="#ddd"></u-icon>
							<text>上传图片</text>
							<text class="upload-hint">(最多8张)</text>
						</view>
						<view class="image-list">
							<view class="image-item" v-for="(image, index) in formData.images" :key="index">
								<image :src="image" mode="aspectFill"></image>
								<u-icon name="close" @tap.stop="removeImage(index)" class="remove-btn"></u-icon>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-section">
			<u-button type="primary" text="提交" @tap="submitForm" :disabled="!isFormValid"></u-button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'

	interface FormData {
		contact : string
		phone : string
		details : string
		video : string
		images : string[]
	}

	const formData = ref<FormData>({
		contact: '',
		phone: '',
		details: '',
		video: '',
		images: []
	})

	// 表单验证
	const isFormValid = computed(() => {
		return formData.value.contact &&
			formData.value.phone &&
			formData.value.details
	})

	// 从通讯录获取手机号
	const getPhoneFromContacts = () => {
		uni.chooseContact({
			success: (res) => {
				formData.value.phone = res.phoneNumber
			}
		})
	}

	// 上传视频
	const uploadVideo = () => {
		uni.chooseVideo({
			count: 1,
			success: (res) => {
				formData.value.video = res.tempFilePath
			}
		})
	}

	// 删除视频
	const removeVideo = () => {
		formData.value.video = ''
	}

	// 上传图片
	const uploadImages = () => {
		const remainCount = 8 - formData.value.images.length
		if (remainCount <= 0) {
			uni.showToast({
				title: '最多上传8张图片',
				icon: 'none'
			})
			return
		}

		uni.chooseImage({
			count: remainCount,
			success: (res) => {
				formData.value.images.push(...res.tempFilePaths)
			}
		})
	}

	// 删除图片
	const removeImage = (index : number) => {
		formData.value.images.splice(index, 1)
	}

	// 提交表单
	const submitForm = async () => {
		if (!isFormValid.value) {
			uni.showToast({
				title: '请填写完整信息',
				icon: 'none'
			})
			return
		}

		try {
			// 这里添加实际的提交逻辑
			await uni.showLoading({ title: '提交中...' })

			// 模拟提交
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				// 重置表单
				formData.value = {
					contact: '',
					phone: '',
					details: '',
					video: '',
					images: []
				}
			}, 1500)
		} catch (error) {
			uni.showToast({
				title: '提交失败，请重试',
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss">
	.feedback-form {
		min-height: 100vh;
		background-color: #f5f7fa;
		padding-bottom: 120rpx;
	}

	.header {
		background: linear-gradient(to right, #eef0ff, #f5f7fa);
		padding: 40rpx 30rpx;
		display: flex;
		justify-content: space-between;
		height: 300rpx;
		flex-direction: column;
		padding-top: 110rpx;

		.title {
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
			margin: 40rpx 0;
		}

		.header-image {
			width: 200rpx;
			height: 120rpx;
		}
	}

	.location {
		display: flex;
		align-items: center;
		gap: 10rpx;
		padding: 20rpx 30rpx;
		background-color: #fff;
		font-size: 28rpx;
		color: #666;
	}

	.form-container {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 0 30rpx;
	}

	.form-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
		display: flex;
		align-items: center;

		.label {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 10rpx;

			.required {
				color: #ff4d4f;
				margin-left: 4rpx;
			}
		}

		.get-contacts {
			color: #ff4d4f;
			font-size: 24rpx;
			text-decoration: line-through;
		}
	}

	.upload-section {
		padding: 30rpx 0;

		.upload-title {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
		}

		.upload-container {
			display: flex;
			gap: 20rpx;
		}

		.upload-item {
			flex: 1;
		}

		.upload-box {
			border: 2rpx dashed #ddd;
			border-radius: 12rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10rpx;

			text {
				font-size: 26rpx;
				color: #666;
			}

			.upload-hint {
				font-size: 22rpx;
				color: #999;
			}
		}
	}

	.preview-video {
		margin-top: 20rpx;
		position: relative;

		.video-preview {
			width: 100%;
			height: 300rpx;
			border-radius: 12rpx;
		}
	}

	.image-list {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;

		.image-item {
			position: relative;
			width: calc((100% - 40rpx) / 3);
			aspect-ratio: 1;

			image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}
	}

	.remove-btn {
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		padding: 6rpx;
	}

	.submit-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
</style>